﻿<!--X-Template 组件模板-->
<!--树形下拉选择器-->
<script type="text/x-template" id="tree-selector-template">
     <el-select
          ref="select"
          :value="selectedValue"
          placeholder="请选择"
          v-on:visible-change="handleDropdownVisible"
          popper-class="tree-select-dropdown"
          size="mini"
          clearable
          v-on:clear="handleClear"
     >
      <el-option :value="selectedValue"  style="height: auto; padding: 0;">
        <div class="tree-container">
          <!-- 树形结构 -->
          <el-tree
                ref="tree"
                :data="treeData"
                :props="treeProps"
                node-key="id"
                v-on:node-click="handleNodeClick"
                default-expand-all
                :expand-on-click-node="false"
          >
             <span class="custom-tree-node" slot-scope="{ node, data }">
                        <i :class="data.icon"></i>
                        <a>
                            <cite>{{ node.label }}</cite>
                        </a>
              </span>
          </el-tree>

          <!-- 分页 -->
          <el-pagination
            small
            :current-page="currentPage"
            :page-sizes="[10,15,20,30]"
            :page-size="pageSize"
            :total="total"
            v-on:current-change="handlePageChange"
            layout="total,sizes,prev, pager, next,jumper"
          >
         </el-pagination>
        </div>
      </el-option>
    </el-select>
</script>
<script>
    var TreeSelectorComponent= {
          props: {
                treeProps: {
                  type: Object,
                  default: () => ({
                    label: 'name',
                    children: 'children'
                  })
                },
                depId:String,  // 科室ID
                deviceTypeId:String, // 设备类型ID
                dialogVisible:Boolean,
                currentId:String,
                currentName:String,
                value:String
          },
          template:'#tree-selector-template',  // 组件模板
          data:function() {
            return {
              selectedValue: '',  // 选中时的值
              selectedLabel:'',   // 选中时的label
              treeData: [],       // 树节点数据
              currentPage: 1,     // 当前页码
              pageSize: 10,       // 每页条数
              total: 0           // 总条数
            }
          },
          watch:{
            dialogVisible:function(){
                var cvm = this;
                if(cvm.dialogVisible){
                    cvm.currentPage=1;
                    cvm.selectedValue = cvm.currentName;
                    cvm.loadTreeData();
                }
            }
          },
          methods: {

                // 分页变化事件处理  （定义一个异步方法，其实就是返回一个Promise）
                async handlePageChange(page) {
                      var cvm =this;
                      cvm.currentPage = page;
                      const { data,tatal } = await loadTreeData(); // 加载树内容
                },

                // 加载树数据
                loadTreeData(){
                    var cvm = this;
                    return new Promise(resolve=>{
                        abp.ajax({
                            type:'get',
                            url:`/api/exam-item/get-dir-tree?depId=${cvm.depId}&deviceTypeId=${cvm.deviceTypeId}&page=${cvm.currentPage}&pageSize=${cvm.pageSize}`
                        }).then(res=>{
                            if(res.code===0){
                                cvm.treeData = res.data.list;
                                cvm.total = res.data.total;
                                resolve();
                            }
                        });
                    })
                },

                // 节点点击处理
                handleNodeClick(data) {
                  var cvm = this;
                  cvm.selectedValue = data.name;
                  this.$emit('parent-selected-change', data);
                  cvm.$refs["select"].blur();
                },

                handleClear(){
                    var cvm =this;
                    cvm.selectedValue=null;
                    this.$emit('parent-selected-change',{id:null,name:null});
                    cvm.$refs["select"].blur();
                },

                // 下拉框显示/隐藏（visible-change事件）
                handleDropdownVisible(visible) {
                  if (!visible) {
                    this.currentPage = 1;
                  }
                }
          },
          created(){
              var cvm = this;
              cvm.loadTreeData().then(()=>{
                  if( cvm.currentName && cvm.currentId ){
                          cvm.selectedValue = cvm.currentName;
                          cvm.$refs["tree"].setCurrentKey(cvm.currentId);
                  }
              })
          }
     };
</script>
<style>

</style>